<template>
	<uni-search-bar @confirm="search" :focus="false" v-model="searchValue" @blur="blur" @input="input"
		cancelButton="none" @clear="clear" placeholder="请输入城市或者景点名称">
	</uni-search-bar>
	<uni-swiper-dot class="uni-swiper-dot-box" :info="info" :current="current" :mode="mode" :dots-styles="dotsStyles"
		field="content">
		<swiper class="swiper-box" @change="change" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="item in info" :key="item.index">
				<view class="swiper-item" @click="clickItem(item)">
					<image class="banner-image" :src="item.url"></image>
				</view>
			</swiper-item>
		</swiper>
	</uni-swiper-dot>
	<view class="warp">
		<uni-section title="走遍大好河山" type="line" padding>
			<uni-grid :column="4" :highlight="true" @change="selectGrid">
				<uni-grid-item v-for="(item, index) in 4" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<uni-icons type="image" :size="30" color="#777" />
						<text class="text">文本信息</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
	</view>
	<view class="warp">
		<uni-section title="热门景点" type="line" padding>
			<uni-data-picker placeholder="请选择省份" popup-title="请选择城市" :localdata="dataTree" v-model="city"
				@change="changeCity">
			</uni-data-picker>
			<view class="charts-box">
				<qiun-data-charts type="column"
					:opts="{color:['#FAC858','#EE6666'],extra:{column:{linearType:'custom',seriesGap:5,linearOpacity:0.5,barBorderCircle:true,customColor:['#FA7D8D','#EB88E2']}}}"
					:chartData="chartsDataColumn1" />
			</view>
		</uni-section>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import demodata from '@/mockdata/demodata.json';
	import {
		onReady
	} from '@dcloudio/uni-app'
	let searchValue = ref('')
	let city = ref('')
	let chartsDataColumn1 = reactive({})
	const mode = ref("nav")
	const autoplay = ref(true)
	const interval = ref(2000)
	const duration = ref(500)
	let dataTree = reactive([{
			text: "江苏",
			value: "1-0",
			children: [{
					text: "南京",
					value: "1-1"
				},
				{
					text: "苏州",
					value: "1-2"
				}
			]
		},
		{
			text: "浙江",
			value: "2-0",
			children: [{
					text: "杭州",
					value: "2-1"
				},
				{
					text: "宁波",
					value: "2-2"
				}
			]
		},
		{
			text: "安徽",
			value: "3-0",
			disable: true
		}
	])

	const info = reactive([{
			index: 1,
			url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			content: '内容 A'
		},
		{
			index: 2,
			url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			content: '内容 B'
		},
		{
			index: 3,
			url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			content: '内容 C'
		}
	])
	let current = ref(0)
	const dotsStyles = ref({
		backgroundColor: 'rgba(83, 200, 249,0.3)',
		border: '1px rgba(83, 200, 249,0.3) solid',
		color: '#fff'
	})

	// 方法
	onReady(() => {
		getServerData()
	})
	const getServerData = () => {
		//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
		//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
		console.log("11111")
		chartsDataColumn1 = JSON.parse(JSON.stringify(demodata.Column));
	}
	const complete = (e) => {
		console.log("渲染完成事件", e);
	}
	const getIndex = (e) => {
		console.log("获取点击索引事件", e);
	}
	const changeCity = () => {
		console.log(city)
	}
	const search = (res) => {
		uni.showToast({
			title: '搜索：' + res.value,
			icon: 'none'
		})
	}
	const input = (res) => {
		console.log('----input:', res)
	}
	const clear = (res) => {
		uni.showToast({
			title: 'clear事件，清除值为：' + res.value,
			icon: 'none'
		})
	}
	const blur = (res) => {
		uni.showToast({
			title: 'blur事件，输入值为：' + res.value,
			icon: 'none'
		})
	}
	const clickItem = (e) => {
		console.log(22222, e)
	}
	const change = (e) => {
		current.value = e.detail.current
	}
	const selectGrid = (e) => {
		let {
			index
		} = e.detail


		uni.showToast({
			title: `点击第${index+1}个宫格`,
			icon: 'none'
		})
	}
</script>

<style lang="scss">

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}

	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}

	// .banner-image {
	// 	width: 100%;
	// }
	/* #ifndef APP-NVUE */
	/* #endif */
	.banner-image {
		width: 100%;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>